import React, { useEffect, useState } from 'react'
import '../static/less/bang.less'
import { topAll, topList } from '../api/index'
import { Link } from 'react-router-dom'
export default function Bang() {
  let [topA, setTopAll] = useState([]);
  let [topL, setTopList] = useState([]);
  let [index, setIndex] = useState(1)
  const topAllFn = async () => {
    await topAll().then(
      content => {
        // console.log(content);
        let { code, data } = content;
        if (code == 200) {
          setTopAll(data);
        }
      }
    )
  }

  const topListFn = async () => {
    await topList({
      id: index,
      p: 1
    }).then(
      content => {
        // console.log(content);
        let { code, data } = content;
        if (code == 200) {
          setTopList(data)
        }
      }
    )
  }

  // 初始化 
  useEffect(() => {
    topAllFn();
    topListFn();
  }, [index])

  return (
    <div className='bang'>
      <div className='top'>
        <div className='back' onClick={
          () => {
            window.history.back();
          }
        }></div>
        <h2 className='top-title'>榜单</h2>
      </div>
      <div className='bottom'>
        <div className="bottom-left">
          {
            topA.map((item, i) => {
              return (
                <div
                  key={i}
                  className={item.id == index ? 'active' : ''}
                  onClick={() => {
                    setIndex(item.id)
                  }}
                >
                  {item.name}
                </div>
              )
            })
          }
        </div>
        <div className="bottom-right">
          {
            topL.map((item, i) => {
              return (
                <Link to={`/detail?id=${item.id}`} key={i}>
                  <div className='box'>
                    <div className='left'>
                      <img src={item.pic} alt="" />
                    </div>
                    <div className='right'>
                      <h3 className='title'>{item.title}</h3>
                      <p className='text'>{item.info}</p>
                      <div className='tag'>
                        {
                          item.tag.split(" ").map((itemm, j) => {
                            return (
                              <span key={j}>{itemm}</span>
                            )
                          })
                        }
                      </div>
                      <div className='numLook'>
                        {
                          (item.num_look / 10000).toFixed(2) + '万观看'
                        }
                      </div>
                      <div className='newZJ'>最新章节：{item.firstchapterid}话</div>
                    </div>
                  </div>
                </Link>
              )
            })
          }
        </div>
      </div>
    </div>
  )
}

